<template>
  <div
    id="babylonViewer"
    ref="babylonViewer"
    style="height: 100%; width: 100%; position: relative"
    v-show="status.isShow"
  >
    <canvas id="babylonCanvas" ref="babylonCanvas" class="babylonCanvas"></canvas>
  </div>
</template>
<script>
import { defineComponent, onMounted, ref, reactive } from 'vue'
import { BabylonPanel } from '@/components/babylonUnits/stage'

export default defineComponent({
  components: {},
  setup() {
    const babylonCanvas = ref(null)
    const status = reactive({ isShow: true })
    let panel
    const methods = {
      createContainer: async () => {
        panel = new BabylonPanel(babylonCanvas.value)
      },
      draw: async () => {
        panel.drawing()
      },
      getImageData: async () => {
        return panel.getImageData()
      }
    }

    onMounted(async () => {
      await methods.createContainer()
    })

    return {
      babylonCanvas,
      methods,
      status
    }
  }
})
</script>

<style scoped>
.babylonCanvas {
  height: 100%;
  width: 100%;
  background-color: #f0f0f0;
}
</style>
